<template>
  <el-dialog :modelValue="dialogVisible" title="列表显示栏目" :width="650" top="32vh" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="cancel">
    <template v-for="item in fields" :key="item.label">
      <el-checkbox :disabled="item.prop == 'placeholder'" v-model="item.visible" :label="item.label" size="large" />
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getTableHeader } from '@/utils'
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
  list: Array, // 列表数组
  dialogVisible: {
    //  控制是否显示
    type: Boolean,
    default: false
  }
})

interface listType {
  label: String
  prop: String
  width: String
  visible: Boolean
}

let fields = ref<listType[]>([])

onMounted(() => {
  const th = getTableHeader()
  if (th) {
    nextTick(() => {
      fields.value = th
      emit('resetData', fields.value)
    })
  }
})
const headerBread = localStorage.getItem('table-header')
watch(
  () => props.list,
  (val) => {
    fields.value = val as listType[]
    // // 筛选
    // if(headerBread){
    //   if(fields.value.toString()!=JSON.parse(headerBread)[route.fullPath].toString()){
    //     fields.value.push({ label: '', prop: 'placeholder', width: '', visible: true })
    //   }else{
    //     if(fields.value[fields.value.length-1].prop=='placeholder'){
    //       fields.value.splice(fields.value.length-1,1)
    //     }
    //   }
    // }
  },
  { immediate: true }
)

// 关闭弹框   重置表格列表
const emit = defineEmits(['cancel', 'resetData'])

const cancel = () => {
  getTableHeader(fields.value)
  emit('cancel')
}
</script>
<style scoped lang="scss"></style>
